/* eslint-disable */
import React, { useState, useImperativeHandle, forwardRef, useEffect } from 'react';
import { Table, Divider, Row, Col, Form, Input, Button, DatePicker, Select, InputNumber } from 'antd';
import moment from 'moment';
import styles from './CreditFileManagement.less';
import { emptyText, formatNoFixed, debounce } from '../../../utils/commonUtil';
import { areaList } from '@vant/area-data';

const FormItem = Form.Item;
const { Option } = Select;
const { TextArea } = Input;

let BasicInformationMaintenance = (props, ref) => {

  const { basicInformationData, onAdd, onCancel, countriesList, basicFlag, highlightData, registrationStatus, enterpriseType, industryTypeList, useSpinFlag } = props;
  const [basicList, setBasicList] = useState({});
  const [form] = Form.useForm();
  const { getFieldsValue } = form;
  const [provinceList, setProvinceList] = useState([]);
  const [cityList, setCityList] = useState([]);
  const onDataProcessing = (obj) => {
    let list = []
    for (var i in obj) {
      list.push({
        dictValue: obj[i],
        dictSubCode: i
      })
    }
    return list
  }
  const province = onDataProcessing(areaList.province_list)
  const city = onDataProcessing(areaList.city_list)

  useImperativeHandle(ref, () => ({
    basicList: JSON.parse(JSON.stringify(basicList)),
    getFieldsValue: getFieldsValue
  }));

  useEffect(() => {
    if (basicFlag && basicInformationData) {
      form.resetFields()
      form.setFieldsValue(basicInformationData)
      setBasicList(JSON.parse(JSON.stringify(basicInformationData)))
      basicInformationData.country && onChooseCountry(basicInformationData.country, 1)
      basicInformationData.province && onChooseCountry("中国", 1)
      basicInformationData.province && onChooseCountry(basicInformationData.province, 2)
    }
  }, [basicFlag, basicInformationData, form])

  const onChange = (values, index, key, obj) => {
    if (!basicList[obj][index].masterDataCode) basicList[obj][index].masterDataCode = basicInformationData.masterDataCode
    basicList[obj][index][key] = values
    setBasicList(JSON.parse(JSON.stringify(basicList)))
  }

  const dataProcessing = (value, beforeStr, afterStr) => {
    switch (value) {
      case "basicModel":
        basicModel[beforeStr] = afterStr
        break;
      case 'shareholders':
        shareholders[beforeStr] = afterStr
        break;
      case 'personnel':
        personnel[beforeStr] = afterStr
        break;
      case 'foreignInvestment':
        foreignInvestment[beforeStr] = afterStr
        break;
      case 'branch':
        branch[beforeStr] = afterStr
        break;
      case 'change':
        change[beforeStr] = afterStr
        break;
      case 'affiliatedInstitution':
        affiliatedInstitution[beforeStr] = afterStr
        break;

      // no default
    }
  }

  let basicModel = {}
  let shareholders = {}
  let personnel = {}
  let branch = {}
  let foreignInvestment = {}
  let change = {}
  let affiliatedInstitution = {}
  let data = highlightData ? highlightData.split("}") : []
  data.forEach((item) => {
    if (item.length > 0) {
      let list = item.split(":{")
      let dataClone = list[1] && list[1].indexOf("id:") > -1 ? list[1].split("id:") : []
      dataClone.forEach(i => {
        if (i.length > 0) {
          let index = i.indexOf(";");
          let beforeStr = i.substr(0, index);
          let afterStr = i.substr(index + 1);
          dataProcessing(list[0], beforeStr, afterStr)
        }
      })
    }
  })

  const registrationStatusOptions = registrationStatus.map(item => <Option key={item.dictSubCode} value={item.dictValue}>{item.dictValue}</Option>);
  const enterpriseTypeOptions = enterpriseType.map(item => <Option key={item.dictSubCode} value={item.dictValue}>{item.dictValue}</Option>);
  const industryTypeListOptions = industryTypeList.map(item => <Option key={item.dictSubCode} value={item.dictValue}>{item.dictValue}</Option>);
  const countriesListOptions = countriesList.map(item => <Option key={item.dictSubCode} value={item.dictValue}>{item.dictValue}</Option>);
  const provinceListOptions = provinceList.map(item => <Option key={item.dictSubCode} value={item.dictValue}>{item.dictValue}</Option>);
  const cityListOptions = cityList.map(item => <Option key={item.dictSubCode} value={item.dictValue}>{item.dictValue}</Option>);

  const shareholdersColumns = [
    {
      title: '股东名称', dataIndex: 'shareholdersName', key: 'shareholdersName',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "shareholdersName", "shareholdersInformationList") }}
          style={{ color: (shareholders[record.id] ? shareholders[record.id].indexOf("shareholdersName") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '股本比例', dataIndex: 'shareholdersProportion', key: 'shareholdersProportion',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "shareholdersProportion", "shareholdersInformationList") }}
          style={{ color: (shareholders[record.id] ? shareholders[record.id].indexOf("shareholdersProportion") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '出资额（万元）', dataIndex: 'capitalContribution', key: 'capitalContribution',
      render: (text, record, index) => (
        <InputNumber value={text} formatter={value => value ? formatNoFixed(value,) : ''}
          onChange={(e) => { onChange(e.target.value, index, "capitalContribution", "shareholdersInformationList") }}
          style={{ width: "100%", color: (shareholders[record.id] ? shareholders[record.id].indexOf("capitalContribution") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '出资币种', dataIndex: 'capitalCurrency', key: 'capitalCurrency',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "capitalCurrency", "shareholdersInformationList") }}
          style={{ color: (shareholders[record.id] ? shareholders[record.id].indexOf("capitalCurrency") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '出资方式', dataIndex: 'capitalWay', key: 'capitalWay',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "capitalWay", "shareholdersInformationList") }}
          style={{ color: (shareholders[record.id] ? shareholders[record.id].indexOf("capitalWay") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '股东国别', dataIndex: 'shareholdersCountry', key: 'shareholdersCountry',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "shareholdersCountry", "shareholdersInformationList") }}
          style={{ color: (shareholders[record.id] ? shareholders[record.id].indexOf("shareholdersCountry") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '股东类型', dataIndex: 'shareholdersType', key: 'shareholdersType',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "shareholdersType", "shareholdersInformationList") }}
          style={{ color: (shareholders[record.id] ? shareholders[record.id].indexOf("shareholdersType") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '操作', key: 'operate', width: 80,
      render: (text, record, index) => (
        <Button type="link" onClick={() => { onDelete("shareholdersInformationList", index) }} size="small">删除</Button>
      ),
    },
  ];
  const KeyPersonnelInformation = [
    {
      title: '姓名', dataIndex: 'name', key: 'name',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "name", "personnelInformationList") }}
          style={{ color: (personnel[record.id] ? personnel[record.id].indexOf("name") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '职务', dataIndex: 'position', key: 'position',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "position", "personnelInformationList") }}
          style={{ color: (personnel[record.id] ? personnel[record.id].indexOf("position") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '是否法人', dataIndex: 'whetherLegalPerson', key: 'whetherLegalPerson',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "whetherLegalPerson", "personnelInformationList") }}
          style={{ color: (personnel[record.id] ? personnel[record.id].indexOf("whetherLegalPerson") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '操作', key: 'operate', width: 80,
      render: (text, record, index) => (
        <Button type="link" onClick={() => { onDelete("personnelInformationList", index) }} size="small">删除</Button>
      ),
    },
  ];
  const branchColumns = [
    {
      title: '公司名称', dataIndex: 'companyName', key: 'companyName',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "companyName", "branchInstitutionsList") }}
          style={{ color: (branch[record.id] ? branch[record.id].indexOf("companyName") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '统一社会信用代码', dataIndex: 'branchCreditCode', key: 'branchCreditCode',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "branchCreditCode", "branchInstitutionsList") }}
          style={{ color: (branch[record.id] ? branch[record.id].indexOf("branchCreditCode") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '分支机构企业注册号', dataIndex: 'branchRegisterCode', key: 'branchRegisterCode',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "branchRegisterCode", "branchInstitutionsList") }}
          style={{ color: (branch[record.id] ? branch[record.id].indexOf("branchRegisterCode") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '分支机构登记机关', dataIndex: 'branchRegistrationAuthority', key: 'branchRegistrationAuthority',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "branchRegistrationAuthority", "branchInstitutionsList") }}
          style={{ color: (branch[record.id] ? branch[record.id].indexOf("branchRegistrationAuthority") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '操作', key: 'operate', width: 80,
      render: (text, record, index) => (
        <Button type="link" onClick={() => { onDelete("branchInstitutionsList", index) }} size="small">删除</Button>
      ),
    },
  ];
  const ChangeInformation = [
    {
      title: '变更事项', dataIndex: 'changesAs', key: 'changesAs',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "changesAs", "changeInformationList") }}
          style={{ color: (change[record.id] ? change[record.id].indexOf("changesAs") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '变更前内容', dataIndex: 'contentBeforeChange', key: 'contentBeforeChange',
      render: (text, record, index) => (
        <TextArea autoSize={{ minRows: 1, maxRows: 1 }} value={text} onChange={(e) => { onChange(e.target.value, index, "contentBeforeChange", "changeInformationList") }}
          style={{ color: (change[record.id] ? change[record.id].indexOf("contentBeforeChange") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '变更后内容', dataIndex: 'contentAfterChange', key: 'contentAfterChange',
      render: (text, record, index) => (
        <TextArea autoSize={{ minRows: 1, maxRows: 1 }} value={text} onChange={(e) => { onChange(e.target.value, index, "contentAfterChange", "changeInformationList") }}
          style={{ color: (change[record.id] ? change[record.id].indexOf("contentAfterChange") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '变更日期', dataIndex: 'changeDate', key: 'changeDate',
      render: (text, record, index) => (
        <DatePicker value={text ? moment(text) : ""} onChange={(data, dateString) => { onChange(dateString, index, "changeDate", "changeInformationList") }}
          style={{ width: "100%", color: (change[record.id] ? change[record.id].indexOf("changeDate") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '操作', key: 'operate', width: 80,
      render: (text, record, index) => (
        <Button type="link" onClick={() => { onDelete("changeInformationList", index) }} size="small">删除</Button>
      ),
    },
  ];
  const ForeignInvestmentInformation = [
    {
      title: '被投资公司名称', dataIndex: 'investorCompanyName', key: 'investorCompanyName',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "investorCompanyName", "foreignInvestmentInformationList") }}
          style={{ color: (foreignInvestment[record.id] ? foreignInvestment[record.id].indexOf("investorCompanyName") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '被投资公司类型', dataIndex: 'investorCompanyType', key: 'investorCompanyType',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "investorCompanyType", "foreignInvestmentInformationList") }}
          style={{ color: (foreignInvestment[record.id] ? foreignInvestment[record.id].indexOf("investorCompanyType") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '统一社会信用代码', dataIndex: 'investorCreditCode', key: 'investorCreditCode',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "investorCreditCode", "foreignInvestmentInformationList") }}
          style={{ color: (foreignInvestment[record.id] ? foreignInvestment[record.id].indexOf("investorCreditCode") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '成立日期', dataIndex: 'investorSetUpDate', key: 'investorSetUpDate',
      render: (text, record, index) => (
        <DatePicker value={text ? moment(text) : ""} onChange={(data, dateString) => { onChange(dateString, index, "investorSetUpDate", "foreignInvestmentInformationList") }}
          style={{ width: "100%", color: (foreignInvestment[record.id] ? foreignInvestment[record.id].indexOf("investorSetUpDate") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '被投资企业法人', dataIndex: 'legalPerson', key: 'legalPerson',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "legalPerson", "foreignInvestmentInformationList") }}
          style={{ color: (foreignInvestment[record.id] ? foreignInvestment[record.id].indexOf("legalPerson") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '注册资本金额（元）', dataIndex: 'investorRegisteredAmount', key: 'investorRegisteredAmount',
      render: (text, record, index) => (
        <InputNumber value={text} formatter={value => value ? formatNoFixed(value,) : ''}
          onChange={(e) => { onChange(e.target.value, index, "investorRegisteredAmount", "foreignInvestmentInformationList") }}
          style={{ width: "100%", color: (foreignInvestment[record.id] ? foreignInvestment[record.id].indexOf("investorRegisteredAmount") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '注册资本币种', dataIndex: 'investorRegisteredCapital', key: 'investorRegisteredCapital',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "investorRegisteredCapital", "foreignInvestmentInformationList") }}
          style={{ color: (foreignInvestment[record.id] ? foreignInvestment[record.id].indexOf("investorRegisteredCapital") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '出资比例（%）', dataIndex: 'investorInvestmentProportion', key: 'investorInvestmentProportion',
      render: (text, record, index) => (
        <Input value={text} onChange={(e) => { onChange(e.target.value, index, "investorInvestmentProportion", "foreignInvestmentInformationList") }}
          style={{ color: (foreignInvestment[record.id] ? foreignInvestment[record.id].indexOf("investorInvestmentProportion") > -1 : false) ? "#e64552" : "" }} />
      ),
    },
    {
      title: '操作', key: 'operate', width: 80,
      render: (text, record, index) => (
        <Button type="link" onClick={() => { onDelete("foreignInvestmentInformationList", index) }} size="small">删除</Button>
      ),
    },
  ];

  const addSave = (obj) => {
    basicList[obj] ? basicList[obj].push({ key: +new Date() + '' }) : basicList[obj] = [{ key: +new Date() + '' }]
    setBasicList(JSON.parse(JSON.stringify(basicList)))
  }

  const onDelete = (obj, index) => {
    let data = basicList[obj].splice(index, 1)
    setBasicList(JSON.parse(JSON.stringify(basicList)))
  }

  const onChooseCountry = (value, falg) => {
    if (falg == 1) {
      let data = countriesList.filter(item => item.dictValue === value)
      data.length === 1 && data[0].dictSubCode == "countries_Chinese" ? setProvinceList(province) : setProvinceList([])
      data.length === 1 && data[0].dictSubCode == "countries_Chinese" ? null : setCityList([])
    }

    if (falg == 2) {
      let data = province.filter(item => item.dictValue == value)
      let index = null
      data.length === 1 ? index = data[0].dictSubCode.slice(0, 2) : null
      index && setCityList(city.filter(item => item.dictSubCode.slice(0, 2) == index))
    }
  }

  const debounceAddFun = debounce(onAdd, 1000)

  return (
    <div>
      <Row>
        <Col span={24} align="right">
          <Button onClick={() => onCancel()}>返回</Button>
          <Button style={{ marginLeft: '15px' }} onClick={() => { useSpinFlag(true); debounceAddFun() }}>保存</Button>
        </Col>
      </Row>
      <Form initialValues={{}} form={form}>
        <Divider orientation="left">营业执照信息</Divider>
        <div className={styles.contantLineBorder}>
          <Row>
            <Col span={12} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>统一社会信用代码</Col>
                <Col span={16} className={styles.contantLineRightFrom}>
                  <FormItem name={"creditCode"} className={styles.formClass}>
                    <Input style={{ color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("creditCode") > -1 : false) ? "#e64552" : "" }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={12}  >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>邓白氏编码</Col>
                <Col span={16} className={styles.contantLineRightFrom} >
                  <FormItem name={"dunsCode"} className={styles.formClass}>
                    <Input style={{ color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("dunsCode") > -1 : false) ? "#e64552" : "" }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={12} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>登记状态</Col>
                <Col span={16} className={styles.contantLineRightFrom}>
                  <FormItem name={"registrationStatus"} className={styles.formClass}>
                    <Select style={{
                      color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("registrationStatus") > -1 : false) ? "#e64552" : ""
                    }}>
                      {registrationStatusOptions}
                    </Select>
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={12}  >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>企业类型</Col>
                <Col span={16} className={styles.contantLineRightFrom} >
                  <FormItem name={"enterpriseType"} className={styles.formClass}>
                    <Select style={{ color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("enterpriseType") > -1 : false) ? "#e64552" : "" }}>
                      {enterpriseTypeOptions}
                    </Select>
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={24} >
              <Row>
                <Col span={4} className={styles.contantLineLeft}>登记机关</Col>
                <Col span={20} className={styles.contantLineRightFrom} >
                  <FormItem name={"registrationAuthority"} className={styles.formClass}>
                    <Input style={{
                      color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("registrationAuthority") > -1 : false) ? "#e64552" : ""
                    }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={12} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>注册资本（元）</Col>
                <Col span={16} className={styles.contantLineRightFrom}>
                  <FormItem name={"registeredCapital"} className={styles.formClass}>
                    <InputNumber formatter={value => value ? formatNoFixed(value,) : ''} style={{
                      width: "100%",
                      color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("registeredCapital") > -1 : false) ? "#e64552" : ""
                    }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={12} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>注册币种</Col>
                <Col span={16} className={styles.contantLineRightFrom} >
                  <FormItem name={"registeredCurrency"} className={styles.formClass}>
                    <Input style={{ color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("registeredCurrency") > -1 : false) ? "#e64552" : "" }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={12} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>实缴资本（元）</Col>
                <Col span={16} className={styles.contantLineRightFrom}>
                  <FormItem name={"contributedCapital"} className={styles.formClass}>
                    <InputNumber formatter={value => value ? formatNoFixed(value,) : ''} style={{
                      width: "100%",
                      color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("contributedCapital") > -1 : false) ? "#e64552" : ""
                    }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={12} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>法定代表人</Col>
                <Col span={16} className={styles.contantLineRightFrom} >
                  <FormItem name={"legalRepresentative"} className={styles.formClass}>
                    <Input style={{
                      color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("legalRepresentative") > -1 : false) ? "#e64552" : ""
                    }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={12} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>成立日期</Col>
                <Col span={16} className={styles.contantLineRightFrom}>
                  <FormItem name={"setUpDate"} className={styles.formClass}>
                    <DatePicker style={{
                      width: "100%", color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("setUpDate") > -1 : false) ? "#e64552" : ""
                    }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={12} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>注册地址</Col>
                <Col span={16} className={styles.contantLineRightFrom} >
                  <FormItem name={"registeredAddress"} className={styles.formClass}>
                    <Input style={{
                      color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("registeredAddress") > -1 : false) ? "#e64552" : ""
                    }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={12} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>营业期限（自）</Col>
                <Col span={16} className={styles.contantLineRightFrom}>
                  <FormItem name={"businessTermBegin"} className={styles.formClass}>
                    <DatePicker style={{
                      width: "100%", color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("businessTermBegin") > -1 : false) ? "#e64552" : ""
                    }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={12} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>营业期限（终）</Col>
                <Col span={16} className={styles.contantLineRightFrom} >
                  <FormItem name={"businessTermEnd"} className={styles.formClass}>
                    <Input style={{
                      color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("businessTermEnd") > -1 : false) ? "#e64552" : ""
                    }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={24}>
              <Row>
                <Col span={4} className={styles.contantLineLeft} style={{ height: "92px" }}>经营范围</Col>
                <Col span={20} className={styles.contantLineRightFrom} style={{ height: "92px" }}>
                  <FormItem name={"businessScope"} className={styles.formClass}>
                    <textarea className="ant-input" style={{
                      color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("businessScope") > -1 : false) ? "#e64552" : "",
                      height: "76px"
                    }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
          </Row>

        </div>
        <Divider orientation="left">基础信息</Divider>
        <div className={styles.contantLineBorder}>
          <Row>
            <Col span={8} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>国家</Col>
                <Col span={16} className={styles.contantLineRightFrom}>
                  <FormItem name={"country"} className={styles.formClass}>
                    <Select style={{ color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("country") > -1 : false) ? "#e64552" : "" }}
                      onChange={(value) => onChooseCountry(value, 1)}> {countriesListOptions} </Select>
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={8}  >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>省份</Col>
                <Col span={16} className={styles.contantLineRightFrom}>
                  <FormItem name={"province"} className={styles.formClass}>
                    <Select style={{ color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("province") > -1 : false) ? "#e64552" : "" }}
                      onChange={(value) => onChooseCountry(value, 2)}>{provinceListOptions}</Select>
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={8} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>城市</Col>
                <Col span={16} className={styles.contantLineRightFrom} >
                  <FormItem name={"city"} className={styles.formClass}>
                    <Select style={{ color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("city") > -1 : false) ? "#e64552" : "" }}
                    >{cityListOptions}</Select>
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={8} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>贸易名称1</Col>
                <Col span={16} className={styles.contantLineRightFrom}>
                  <FormItem name={"tradeName1"} className={styles.formClass}>
                    <Input style={{ color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("tradeName1") > -1 : false) ? "#e64552" : "" }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={16} >
              <Row>
                <Col span={4} className={styles.contantLineLeft}>经营地址1</Col>
                <Col span={20} className={styles.contantLineRightFrom} >
                  <FormItem name={"businessAddress1"} className={styles.formClass}>
                    <Input style={{
                      color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("businessAddress1") > -1 : false) ? "#e64552" : ""
                    }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={8} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>贸易名称2</Col>
                <Col span={16} className={styles.contantLineRightFrom}>
                  <FormItem name={"tradeName2"} className={styles.formClass}>
                    <Input style={{ color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("tradeName2") > -1 : false) ? "#e64552" : "" }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={16} >
              <Row>
                <Col span={4} className={styles.contantLineLeft}>经营地址2</Col>
                <Col span={20} className={styles.contantLineRightFrom} >
                  <FormItem name={"businessAddress2"} className={styles.formClass}>
                    <Input style={{
                      color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("businessAddress2") > -1 : false) ? "#e64552" : ""
                    }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={8} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>员工人数（人）</Col>
                <Col span={16} className={styles.contantLineRightFrom}>
                  <FormItem name={"numberOfEmployees"} className={styles.formClass}>
                    <Input style={{
                      color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("numberOfEmployees") > -1 : false) ? "#e64552" : ""
                    }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={16} >
              <Row>
                <Col span={4} className={styles.contantLineLeft}>行业类型</Col>
                <Col span={20} className={styles.contantLineRightFrom} >
                  <FormItem name={"industryName"} className={styles.formClass}>
                    <Select style={{ color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("industryName") > -1 : false) ? "#e64552" : "" }}>
                      {industryTypeListOptions}
                    </Select>
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={16} >
              <Row>
                <Col span={4} className={styles.contantLineLeft}>国民经济行业名称</Col>
                <Col span={20} className={styles.contantLineRightFrom}>
                  <FormItem name={"nationalEconomyIndustryName"} className={styles.formClass}>
                    <Input style={{
                      color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("nationalEconomyIndustryName") > -1 : false) ? "#e64552" : ""
                    }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={8} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>黑灰名单类型</Col>
                <Col span={16} className={styles.contantLineRightFrom} >
                  <FormItem name={"blacklistType"} className={styles.formClass}>
                    <Input style={{
                      color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("blacklistType") > -1 : false) ? "#e64552" : ""
                    }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={16} >
              <Row>
                <Col span={4} className={styles.contantLineLeft}>入黑灰名单原因</Col>
                <Col span={20} className={styles.contantLineRightFrom} >
                  <FormItem name={"reasonsForBlacklisting"} className={styles.formClass}>
                    <Input style={{
                      color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("reasonsForBlacklisting") > -1 : false) ? "#e64552" : ""
                    }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={8} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>联系电话</Col>
                <Col span={16} className={styles.contantLineRightFrom} >
                  <FormItem name={"contactPhone"} className={styles.formClass}>
                    <Input style={{ color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("contactPhone") > -1 : false) ? "#e64552" : "" }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={8} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>邮政编码</Col>
                <Col span={16} className={styles.contantLineRightFrom}>
                  <FormItem name={"postalCode"} className={styles.formClass}>
                    <Input style={{ color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("postalCode") > -1 : false) ? "#e64552" : "" }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={8} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>联系人</Col>
                <Col span={16} className={styles.contantLineRightFrom}>
                  <FormItem name={"contactPerson"} className={styles.formClass}>
                    <Input style={{ color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("contactPerson") > -1 : false) ? "#e64552" : "" }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={8} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>实际控制人名称</Col>
                <Col span={16} className={styles.contantLineRightFrom} >
                  <FormItem name={"actualControllerName"} className={styles.formClass}>
                    <Input style={{
                      color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("actualControllerName") > -1 : false) ? "#e64552" : ""
                    }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={8} >
              <Row>
                <Col span={8} className={styles.contantLineLeft}>E-maiil</Col>
                <Col span={16} className={styles.contantLineRightFrom} >
                  <FormItem name={"emailAddress"} className={styles.formClass}>
                    <Input style={{ color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("emailAddress") > -1 : false) ? "#e64552" : "" }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
            <Col span={16}>
              <Row>
                <Col span={4} className={styles.contantLineLeft}>网址</Col>
                <Col span={20} className={styles.contantLineRightFrom} >
                  <FormItem name={"url"} className={styles.formClass}>
                    <Input style={{ color: (basicModel[basicInformationData.id] ? basicModel[basicInformationData.id].indexOf("url") > -1 : false) ? "#e64552" : "" }} />
                  </FormItem>
                </Col>
              </Row>
            </Col>
          </Row>
        </div>
      </Form>
      <Divider orientation="left">前十大股东</Divider>
      <Table
        size="small"
        columns={shareholdersColumns}
        dataSource={basicList.shareholdersInformationList}
        pagination={false}
        scroll={{ y: 500 }}
        rowKey={record => record.id ? record.id : record.key}
        locale={{ emptyText }}
      />
      <Row>
        <Col span={24} style={{ marginBottom: "32px" }}>
          <Button type="dashed" block onClick={() => addSave("shareholdersInformationList")}>新增行</Button>
        </Col>
      </Row>
      <Divider orientation="left">主要人员信息</Divider>
      <Table
        size="small"
        columns={KeyPersonnelInformation}
        dataSource={basicList.personnelInformationList}
        pagination={false}
        scroll={{ y: 500 }}
        rowKey={record => record.id ? record.id : record.key}
        style={{ marginBottom: "32px" }}
        locale={{ emptyText }}
      />
      <Row>
        <Col span={24} style={{ marginBottom: "32px" }}>
          <Button type="dashed" block onClick={() => addSave("personnelInformationList")}>新增行</Button>
        </Col>
      </Row>
      <Divider orientation="left">分支机构</Divider>
      <Table
        size="small"
        columns={branchColumns}
        dataSource={basicList.branchInstitutionsList}
        pagination={false}
        scroll={{ y: 500 }}
        rowKey={record => record.id ? record.id : record.key}
        style={{ marginBottom: "32px" }}
        locale={{ emptyText }}
      />
      <Row>
        <Col span={24} style={{ marginBottom: "32px" }}>
          <Button type="dashed" block onClick={() => addSave("branchInstitutionsList")}>新增行</Button>
        </Col>
      </Row>
      <Divider orientation="left">变更信息</Divider>
      <Table
        size="small"
        columns={ChangeInformation}
        dataSource={basicList.changeInformationList}
        pagination={false}
        scroll={{ y: 500 }}
        rowKey={record => record.id ? record.id : record.key}
        style={{ marginBottom: "32px" }}
        locale={{ emptyText }}
      />
      <Row>
        <Col span={24} style={{ marginBottom: "32px" }}>
          <Button type="dashed" block onClick={() => addSave("changeInformationList")}>新增行</Button>
        </Col>
      </Row>
      <Divider orientation="left">对外投资信息</Divider>
      <Table
        size="small"
        columns={ForeignInvestmentInformation}
        dataSource={basicList.foreignInvestmentInformationList}
        pagination={false}
        scroll={{ y: 500 }}
        rowKey={record => record.id ? record.id : record.key}
        style={{ marginBottom: "32px" }}
        locale={{ emptyText }}
      />
      <Row>
        <Col span={24} style={{ marginBottom: "200px" }}>
          <Button type="dashed" block onClick={() => addSave("foreignInvestmentInformationList")}>新增行</Button>
        </Col>
      </Row>
    </div>
  );
}

BasicInformationMaintenance = forwardRef(BasicInformationMaintenance)

export default BasicInformationMaintenance;
